<template>
    <div class="login-page">
        <div class="login-form">
            <div class="form">
                <div class="logo">
                    <img src="../static/img/logo2.png"/>
                </div>
                <el-form label-width="0px" :model="loginForm" style="margin-top:20px" :rules="rules" ref="loginForm">
                    <el-form-item label="" prop="username">
                        <el-input v-model="loginForm.username" autofocus placeholder="用户名" style="width:340px"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="password">
                        <el-input v-model="loginForm.password" type="password" placeholder="密码" style="width:340px"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="smsCode">
                        <el-input v-model="loginForm.smsCode"  placeholder="验证码" style="width:270px"></el-input>
                        <img :src="imgSrc"  @click="createCode"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="loginFn" :loading="btnLoading">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="bg-img">
                <img src="../static/img/bgimgG.png"/>
            </div>
        </div>
        <login-bottom></login-bottom>
    </div>
</template>

<script>
  import {validatePhone} from '@/utils/validate';
  import loginBottom from '@/components/loginBottom';
  import {login,validateCode} from '@/api/index.js';
  export default {
    name: 'login',
   components: { loginBottom },
    data() {
        const isvalidatePhone = (rule, value, callback) => {
            if(!validatePhone(value)){
                callback(new Error('请输入正确的手机号'))
            } else {
                callback()
            }
        };
        const isvalidatesmsCode = (rule, value, callback) => {
            if( value != this.code){
                callback(new Error('验证码输入不正确'))
            } else {
                callback()
            }
        };
      return {
          loginForm:{
              username:'',
              password:'',
              smsCode:''
          },
          rules:{
              username: [{ required: true, trigger: 'blur',message: '请输入用户名' },],
              password: [{ required: true, trigger: 'blur',message: '请输入密码'},],
              smsCode: [{ required: true, trigger: 'blur',message: '请输入验证码' },],
          },
          imgSrc:null,
          uuid:'',
          btnLoading:false
      }
    },
    methods: {
         //生成验证码的方法
         createCode(){
             validateCode().then(res => {
                 this.imgSrc = res.img;
                 this.uuid = res.uuid;
             })

        },

        //登录
        loginFn(){
            this.$refs['loginForm'].validate((valid) => {
                if (valid) {
                   this.btnLoading = true;
                   let data = {};
                   data.username = this.loginForm.username;
                   data.password = this.loginForm.password;
                   data.validateStr = this.loginForm.smsCode;
                   data.uuid = this.uuid;
                   login(data).then((res)=>{
                       console.log("res",res);
                       let userInfo =  JSON.stringify({userId:res.userId,userName:res.userName,username:res.username});
                       localStorage.setItem('userInfo',userInfo);
                       this.btnLoading = false;
                       this.$router.push({name:"home"});
                   }).catch((err)=>{
                       this.btnLoading = false;
                       this.createCode();
                   })
                   }
            });
        },
        //去忘记密码页
        toForgetPassword(){
            this.$router.push({name:"forgetPassword"});
        }
    },
    created() {
        this.createCode();
    }
  }
</script>



